<!-- 查询卡片组件 -->
<template>
  <el-card class="search_card">
    <el-form :model="formData">
      <el-row>
        <template
          v-for="(item, index) in cloneSearchTemplate"
          :key="index">
          <el-form-item
            v-if="!item.isClosed"
            :label="item.label">
            <el-input
              v-if="item.type === 'input'"
              v-model="formData[item.value]"
              style="width: 130px"
              :placeholder="item.placeholder"
              clearable>
              <template #prefix>
                <el-icon>
                  <Search />
                </el-icon>
              </template>
            </el-input>
            <el-select
              v-if="item.type === 'status'"
              v-model="formData[item.value]"
              :placeholder="item.placeholder"
              style="width: 100px"
              clearable>
              <el-option
                :label="config.button.text.enable"
                :value="true" />
              <el-option
                :label="config.button.text.stop"
                :value="false" />
            </el-select>
            <el-select
                v-if="item.type === 'typeEnum'"
                v-model="formData[item.value]"
                :placeholder="item.placeholder"
                style="width: 150px"
                filterable
                clearable>
              <el-option
                  v-for="enumItem in item.typeEnumList"
                  :key="enumItem.key"
                  :label="enumItem.value"
                  :value="enumItem.key" />
            </el-select>
            <el-select
              v-if="item.type === 'simpleSelect'"
              v-model="formData[item.value]"
              :placeholder="item.placeholder"
              style="width: 150px"
              filterable
              clearable>
              <el-option
                v-for="simpleItem in item.simpleList"
                :key="simpleItem.id"
                :label="simpleItem.simple_name"
                :value="simpleItem.id" />
            </el-select>
            <el-select
              v-if="item.type === 'yesNo'"
              v-model="formData[item.value]"
              style="width: 80px"
              :placeholder="item.placeholder"
              clearable>
              <el-option
                :label="config.button.text.yes"
                :value="true" />
              <el-option
                :label="config.button.text.no"
                :value="false" />
            </el-select>
            <el-date-picker
              v-if="item.type === 'daterange'"
              style="width: 405px"
              v-model="selectTime"
              type="daterange"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间" />
          </el-form-item>
        </template>
        <el-button
          type="primary"
          @click="search"
          class="query_button">
          <template #icon>
            <el-icon>
              <Search />
            </el-icon>
          </template>
          {{ config.button.text.query }}
        </el-button>
        <el-button @click="reset">
          <template #icon>
            <el-icon>
              <Refresh />
            </el-icon>
          </template>
          {{ config.button.text.reset }}
        </el-button>
      </el-row>
    </el-form>
    <div class="right_btn">
      <el-button
        type="info"
        v-permission="validateButtonPermission(route, 0)"
        @click="addEvent">
        <template #icon>
          <el-icon>
            <CirclePlus />
          </el-icon>
        </template>
        {{ config.button.text.add }}
      </el-button>
      <div
        v-if="props.more"
        class="expanded"
        @click="isExpandEvent">
        <span v-if="!isExpand">
          <span>展开</span>
          <el-icon>
            <ArrowDown />
          </el-icon>
        </span>
        <span v-else>
          <span>收起</span>
          <el-icon>
            <ArrowUp />
          </el-icon>
        </span>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from "vue";
import config from "@/common/element-plus/config";
import { validateButtonPermission } from "@/common/utils/validate";
import { useRoute } from "vue-router"
import ApiGlobal from "@/api/modules/global"
import cloneDeep from "lodash/cloneDeep";
import ApiSysInfo from "@/api/modules/sys-info"

const route = useRoute()
// 查询表单
const formData = ref({})
const selectTime = ref([]);
// 是否展开
const isExpand = ref(false)
// props
const props = defineProps(["searchTemplate", "more"])
// emits
const emits = defineEmits(["reset", "addEvent", "search"])
// 深拷贝props.searchTemplate
const cloneSearchTemplate = ref()

// 重置
const reset = () => {
  formData.value = {}
  emits("reset")
}

// 打开新增对话框
const addEvent = () => {
  emits("addEvent")
}

// 查询
const search = () => {
  if (Array.isArray(selectTime.value) && selectTime.value.length === 2) {
    formData.value.startDate = selectTime.value[0];
    formData.value.endDate = selectTime.value[1];
  } else {
    formData.value.startDate = "";
    formData.value.endDate = "";
  }
  emits("search", formData.value)
}

// 展开收起
const isExpandEvent = () => {
  if (!isExpand.value) {
    cloneSearchTemplate.value.forEach((item) => {
      item.isClosed = false
    })
  } else {
    props.searchTemplate.forEach((item) => {
      cloneSearchTemplate.value.forEach((cloneItem) => {
        if (item.isClosed && item.value === cloneItem.value) {
          cloneItem.isClosed = true
        }
      })
    })
  }
  isExpand.value = !isExpand.value
}

onMounted(() => {
  cloneSearchTemplate.value = cloneDeep(props.searchTemplate)
  cloneSearchTemplate.value.forEach(async (item) => {
    if (item.interfaceUrl) {
      const data = await ApiGlobal.getSimpleNameList(item.interfaceUrl)
      item.simpleList = data.data
    }
    // else if(item.typeEnum) {
    //   console.log(item.typeEnum)
    //   const data = await ApiSysInfo.getSysInfoTypeEnum()
    //   item.typeEnumList = data.data
    // }
  })
})
</script>

<style lang="scss" scoped>
.search_card {
  margin-bottom: 4px;

  :deep(.el-card__body) {
    padding: 10px;
    display: flex;
    justify-content: space-between;
  }

  :deep(.el-form-item__label) {
    min-width: 80px;
  }

  .el-form-item {
    margin: 0;
    margin-right: 10px;
    padding: 5px 0;
  }

  .query_button {
    margin-left: 100px;
  }

  .right_btn {
    height: 42px;
    display: flex;
    align-items: center;

    .expanded {
      width: 60px;
      height: 42px;
      user-select: none;
      text-align: right;
      color: #e6a23c;
      line-height: 42px;

      span {
        font-size: 14px;
      }
    }

    .expanded:hover {
      cursor: pointer;
    }
  }
}
</style>
